{% extends 'html/base_template.html' %}
{% load static %}
{% block top_script_section %}
{% endblock %}

{% block content_section %}
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">游戏列表</h3>
        </div>
        <div class="panel-body">
            <script type="text/javascript">
                jQuery(document).ready(function ($) {

                   $("#example-2").dataTable({
                        dom: "t" + "<'row'<'col-xs-6'i><'col-xs-6'p>>",
                        aLengthMenu: [
                            [5, 25, 50, 100, -1], [10, 25, 50, 100, "All"]
                        ],
                        bProcessing: true,
                        bPaginate: true,
                        fnDraw: false,
                        bLengthChange: true,
                        bStateSave: false,
                        bServerSide: true,
                        sServerMethod: "POST",
                       sAjaxSource: "{{ query_url }}",
                       fnServerParams: function (aoData) {
                           aoData.push({'name': 'status', 'value': {{ Status.kAccepted }}});
                       },
                        columns: [
                            {
                                bSortable: false, "render": function () {
                                return '<input type="checkbox" class="cbr">';
                            }
                            },
                            {"data": "index"},
                            {"data": "name"},
                            {"data": "category"},
                            {"data": "type"},
                            {"data": "paymode"},
                            {"data": "version"},
                            {"data": "end_time"},
                            {
                                "data": "id", "render": function (obj, type, row, meta) {
                                return '<a href="{{ query_url }}?id=' + obj + '" class="btn btn-secondary btn-sm btn-icon">查看</a>';
                            }
                            }
                        ],
                        language: {
                            "sProcessing": "处理中...",
                            "sLengthMenu": "每页显示 _MENU_ 条结果",
                            "sZeroRecords": "没有匹配结果",
                            "info": "第 _PAGE_ 页 ( 总共 _PAGES_ 页 ,_TOTAL_条)",
                            "sInfoEmpty": "显示第 0 至 0 条结果，共 0 条",
                            "infoFiltered": "(从 _MAX_ 条记录过滤)",
                            "sInfoPostFix": "",
                            "sSearch": "模糊搜索:",
                            "sUrl": "",
                            "sEmptyTable": "表中数据为空",
                            "sLoadingRecords": "载入中...",
                            "sProcessing": "<img src='{% static 'assets/images/loding.gif'%}'/> 正在加载数据...",
                            "sInfoThousands": ",",
                            "oPaginate": {
                                "sFirst": "首页",
                                "sPrevious": "上页",
                                "sNext": "下页",
                                "sLast": "末页"
                            }
                        },
                    });
{#                    table.fnReloadAjax();#}
                    // Replace checkboxes when they appear
{#                    var $state = $("#example-2 thead input[type='checkbox']");#}
{#                    $("#example-2").on('draw.dt', function () {#}
{#                        cbr_replace();#}
{#                        $state.trigger('change');#}
{#                    });#}
{#                    // Script to select all checkboxes#}
{#                    $state.on('change', function (ev) {#}
{#                        var $chcks = $("#example-2 tbody input[type='checkbox']");#}
{#                        if ($state.is(':checked')) {#}
{#                            $chcks.prop('checked', true).trigger('change');#}
{#                        }#}
{#                        else {#}
{#                            $chcks.prop('checked', false).trigger('change');#}
{#                        }#}
{#                    });#}
                });
            </script>
            <table class="table table-bordered table-striped" id="example-2"
                   name="id_data_table">
                <thead>
                <tr>
{#                    <th class="no-sorting">#}
{#                        <input type="checkbox" class="cbr">#}
{#                    </th>#}
                    <th></th>
                    <th>游戏名称</th>
                    <th>类型</th>
                    <th>基础分类</th>
                    <th>资费模式</th>
                    <th>游戏版本</th>
                    <th>上线时间</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody class="middle-align">
                </tbody>
            </table>
        </div>
    </div>
    {#    <link rel="stylesheet" href="{% static "assets/js/datatables/dataTables.bootstrap.css" %}">#}

{% endblock %}